import React from 'react';
import { Card, Button, Divider } from 'antd';
import { Link } from 'umi';

/**
 * 布局文件
 * @param props
 */
export default (props: any) => {
  const {
    location: { pathname },
  } = props;
  return (
    <Card>
      <Link to="/antd">
        <Button
          type={pathname.indexOf('/antd') >= 0 ? 'primary' : 'default'}
          style={{ marginLeft: 20 }}
        >
          Ant Design 4.0 练习
        </Button>
      </Link>

      <Link to="/hooks">
        <Button
          type={pathname.indexOf('/hooks') >= 0 ? 'primary' : 'default'}
          style={{ marginLeft: 20 }}
        >
          React Hooks 练习
        </Button>
      </Link>

      <Link to="/umiHooks">
        <Button
          type={pathname.indexOf('/umiHooks') >= 0 ? 'primary' : 'default'}
          style={{ marginLeft: 20 }}
        >
          Umi Hooks 练习
        </Button>
      </Link>

      <Link to="/bizcharts">
        <Button
          type={pathname.indexOf('/bizcharts') >= 0 ? 'primary' : 'default'}
          style={{ marginLeft: 20 }}
        >
          Bizcharts 数据可视化
        </Button>
      </Link>

      <Link to="/components">
        <Button
          type={pathname.indexOf('/components') >= 0 ? 'primary' : 'default'}
          style={{ marginLeft: 20 }}
        >
          TypeScript 组件列表
        </Button>
      </Link>

      <Link to="/">
        <Button type="link" style={{ float: 'right' }}>
          返回首页
        </Button>
      </Link>
      <Divider />
      <div>{props.children}</div>
    </Card>
  );
  // 通过 cloneElement,传递参数给子路由
  // return React.Children.map(props.children, (child) => {
  //     return React.cloneElement(child, { aa: 1 });
  // });
};
